<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			*{
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}
			a{
				text-decoration: none;
			}
			ul,ol{
				list-style: none;
			}
			body{
				width: 100%;
				background:url('../img/2.jpeg') repeat-y center top;
				/* 背景图片固定 */
				background-attachment: fixed;
			}
			.fhb{
				width:100%;
				z-index:1;
			}
			.fhb .YS_d1,.YX_d1{
				width: 100%;
				height: 2000px;
				margin: 0 auto;
				background:#fff;
			}
			.fhb .fu_lun{
				background: rgba(0,0,0,0.5);
			}
			.fhb .lunbo{
				width: 1200px;
				height: 500px;
				margin: 0 auto;
				display:flex;
				flex-direction: column;
				justify-content:space-between;
				position: relative;
			}
			h1{
				height:80px;
				text-align: center;
				font-size: 50px;
				background:#fff;
			}
			.fhb .lunbo p{
				text-align: center;
				margin:10px 0;
			}
			.fhb .lunbo .lunbo_d1{
				display:flex;
				overflow: hidden;
			}
			.fhb .lunbo span{
				width:50px;
				height: 50px;
				font-size: 40px;
				position: absolute;
			}
			.fhb .lunbo span a{
				color: #fff;
			}
			.fhb .lunbo span:nth-child(2){
				left:-35px;
				top: 50%;
				margin-top:-50px;
			}
			
			.fhb .lunbo span:nth-child(4){
				right:-55px;
				top: 50%;
				margin-top:-50px;
			}
			/* 为轮播图创建轮播动画效果 */
			@keyframes lunboo{
				from{
					margin-left: 0%;
				}
				to{
					margin-left:-2425px;
				}
			}
			.fhb .lunbo .lunbo_d1 ul{
				display: flex;
				height:321px;
				animation:lunboo 25s linear infinite running;
			}
			
			.fhb .lunbo .lunbo_d1 li{
				float: left;
				margin-right:20px;
				width: 283px;
				height: 321px;
				overflow: hidden;
				border:1px solid #fff;
			}
			.fhb .lunbo .lunbo_d1 li img{
				height: 285px;
				display:block;
				transition: all 0.2s linear;
			}
			.fhb .lunbo .lunbo_d1 li a div{
				width:283px;
				height: 285px;
				display:flex;
				justify-content: center;
				overflow: hidden;
			}
			.fhb .lunbo .lunbo_d1 li img:hover{
				transform:scale(1.1);
			}
			.fhb .lunbo .lunbo_d1 li p{
				width: 250px;
				margin: 0 auto;
				margin-top:6px;
				color: #fff;
				transition: all 0.2s linear;
			}
			.fhb .lunbo .lunbo_d1 li p:hover{
				text-decoration: underline;
				color: #666;
			}
			.fhb .lunbo .chakan{
				width: 165px;
				height: 45px;
				border: 1px solid #fff;
				text-align: center;
				margin: 0 auto;
				margin-bottom: 25px;
				transition: all 0.2s linear;
			}
			.fhb .lunbo .chakan:hover{
				background: #fff;
			}
			.fhb .lunbo .chakan a{
				display: block;
				line-height: 45px;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="fhb">
			<!-- 轮播图以上区域 -->
			<div class="YS_d1"></div>
			<h1>产品中心</h1>
			<div class="fu_lun">
				<div class="lunbo">
						<p>为客户创造价值的的过程中，不断提升企业自身的价值。</p>
						<span><a href=""><</a></span>
						<div class="lunbo_d1">
							<ul id="JS_lunbo">
								<li>
									<a href="">
										<div>
											<img src="../img/13519864.jpg" alt="">
										</div>
										<p>白泽二号Baize2</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
											<img src="../img/13520177.jpg" alt="">
										</div>
										<p>作业级ROV--CROV1</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
											<img src="../img/13519968.png" alt="">
										</div>
										
										<p>观测级ROV--OROV1</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
											<img src="../img/13585471.png" alt="">
										</div>
										
										<p>Eriver100移动监测船（仿生型）</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
										<img src="../img/15910077.jpg" alt="">
										</div>
										<p>防疫机器人Thor-A1</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
										<img src="../img/19178147.png" alt="">
										</div>
										<p>检测采样无人船Tracer</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
										<img src="../img/19180774.png" alt="">
										</div>
										<p>水下探测机器人JH-A1</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
										<img src="../img/28638383.png" alt="">
										</div>
										<p>Explorer系列测绘无人船</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
											<img src="../img/13519864.jpg" alt="">
										</div>
										<p>白泽二号Baize2</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
											<img src="../img/13520177.jpg" alt="">
										</div>
										
										<p>作业级ROV--CROV1</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
											<img src="../img/13519968.png" alt="">
										</div>
										
										<p>观测级ROV--OROV1</p>
									</a>
								</li>
								<li>
									<a href="">
										<div>
											<img src="../img/13585471.png" alt="">
										</div>
										
										<p>Eriver100移动监测船（仿生型）</p>
									</a>
								</li>
							</ul>
							
						</div>
						<span><a href="">></a></span>
						<p class="chakan"><a href="">查看更多</a></p>
				</div>
			</div>
			<!-- 轮播图以下区域 -->
			<div class="YX_d1"></div>
		</div>
	</body>
</html>